<nz-modal [(nzVisible)]="isVisible" [nzMaskClosable]="false" nzTitle="字典值" (nzOnCancel)="handleCancel()"
  [nzFooter]="detailFooter" nzWidth="400">


  <form nz-form [formGroup]="validateForm" #dictionaryValueForm="ngForm">
    <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="6" nzFor="key">字典键</nz-form-label>
      <nz-form-control [nzSpan]="14" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="keyErrorTpl">
        <input nz-input formControlName="key" [(ngModel)]="dictionaryValue.key" placeholder="字典编码必填"
          *ngIf="!isPreView; else keyTemp" maxlength="50">
        <ng-template #keyErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            请输入字典键!
          </ng-container>
          <ng-container *ngIf="control.hasError('duplicated')">
            该字典键已存在!
          </ng-container>
          <ng-container *ngIf="control.hasError('blank')">
            不可输入空格!
          </ng-container>
        </ng-template>
        <ng-template #keyTemp>
          <div class="editable-cell">
            <div class="editable-cell-value-wrap text-truncate">
              {{ dictionaryValue?.key }}
            </div>
          </div>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="6" nzFor="value">字典值</nz-form-label>
      <nz-form-control [nzSpan]="14" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="valueErrorTpl">
        <input nz-input formControlName="value" [(ngModel)]="dictionaryValue.value" placeholder="字典名称必填"
          *ngIf="!isPreView; else valueTemp">
        <ng-template #valueErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            请输入字典值!
          </ng-container>
          <ng-container *ngIf="control.hasError('blank')">
            不可输入空格!
          </ng-container>
        </ng-template>
        <ng-template #valueTemp>
          <div class="editable-cell">
            <div class="editable-cell-value-wrap text-truncate">
              {{ dictionaryValue?.value }}
            </div>
          </div>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="available" nzRequired [nzSpan]="6">是否可用</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <label nz-checkbox formControlName="available" [(ngModel)]="dictionaryValue.available">可用</label>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="remark" [nzSpan]="6">备注</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <textarea nz-input rows="3" autocomplete="off" [(ngModel)]="dictionaryValue.remark" formControlName="remark"
          placeholder="备注选填" *ngIf="!isPreView; else remarkTemp"></textarea>
        <ng-template #remarkTemp>
          <div class="editable-cell">
            <div class="editable-cell-value-wrap text-truncate">
              {{ dictionaryValue?.remark }}
            </div>
          </div>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
  </form>

  <ng-template #detailFooter>
    <!-- <button nz-button nzType="default" (click)="preview()" *ngIf="!isPreView">
      <span>预览</span>
    </button>
    <button nz-button nzType="primary" (click)="preview()" *ngIf="isPreView">
      <span>编辑</span>
    </button> -->
    <button nz-button nzType="primary" (click)="save()" *ngIf="!isPreView" [nzLoading]="loading">
      <span>保存</span>
    </button>
    <button nz-button nzType="default" (click)="handleCancel()">关闭</button>
  </ng-template>
</nz-modal>
